<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <form action="/sendcomment" method="post">
    <textarea style="margin-top: 10px;margin-bottom: 10px;" class="form-control" id="text" name="text" placeholder="发表一条友善的评论😝"></textarea>
    <button type="submit" class="btn btn-primary btn-sm" >发送</button>
    <button type="button" class="btn btn-secondary btn-sm">取消</button>
    <input style="display: none;" type="text"  name="place" value="{{ projectID }}" id="place">
    <hr>
  </form>
  {% for i in range(0,comment_item|length) %}
  <div class="media">
    <img  src="../static/scratch/static/avatar.png" height="50px" width="50px" style="border-radius: 8px;">
    <div class="media-body">
      <div class="row" style="margin-left: 10px;">
        <h5 class="mt-0">{{comment_item[i].user_id}}</h5><h5 style="color: darkgrey;">#{{comment_user_id[i][0]}}</h5>
      </div>
      <p style="margin-left: 10px;margin-bottom: 0px;" >{{comment_item[i].text}}</p>
  
        <a href="#reply{{i}}" style="margin-left: 10px;" data-bs-toggle="collapse">回复</a>
        <div id="reply{{i}}" class="collapse" style="margin-left: 10px;">
          <form action="/replycomment" method="post">
            <textarea style="margin-top: 10px;margin-bottom: 10px;" placeholder="回复@{{ comment_item[i].user_id }}" class="form-control" id="text" name="text" placeholder="发表一条友善的评论😝"></textarea>
            <button type="submit" class="btn btn-primary btn-sm" >发送</button>
            <button type="button" class="btn btn-secondary btn-sm">取消</button>
            <input style="display: none;" type="text"  name="reply_comment_id" value="{{comment_user_id[i][0]}}" id="reply_comment_id">
            <input style="display: none;" type="text"  name="reply_user_id" value="{{comment_user_id[i][1]}}" id="reply_user_id">
          </form>
        </div>
    
      {% if comment_reply[i]|length > 2%}
        {% for j in range(0, 2) %}
          <div class="media mt-3" style="margin-left: 10px;">
            <a class="mr-3" href="#">
              <img src="../static/scratch/static/avatar.png" height="50px" width="50px" style="border-radius: 8px;">
            </a>
            <div class="media-body" style="margin-left: 10px;">
              <div class="row">
                <h5 class="mt-0">{{ comment_reply[i][j][0] }}</h5>
              </div>
              <div class="row">
                <h6 style="color: blue;">@ {{ comment_reply[i][j][2] }}</h6>
              </div>
              <p style="margin-bottom: 0px;">{{ comment_reply[i][j][1] }}</p>
      
              <a href="#reply{{i}}{{j}}"  data-bs-toggle="collapse">回复</a>
              <div id="reply{{i}}{{j}}" class="collapse" >
                <form  action="/replycomment" method="post">
                  <textarea style="margin-top: 10px;margin-bottom: 10px;" placeholder="回复@{{ comment_reply[i][j][0] }}#{{comment_user_id[i][j+1]}}" class="form-control" id="text" name="text" placeholder="发表一条友善的评论😝"></textarea>
                  <button type="submit" class="btn btn-primary btn-sm" >发送</button>
                  <button type="button" class="btn btn-secondary btn-sm">取消</button>
                  <input style="display: none;" type="text"  name="reply_comment_id" value="{{comment_user_id[i][0]}}" id="reply_comment_id">
                  <input style="display: none;" type="text"  name="reply_user_id" value="{{comment_user_id[i][j+2]}}" id="reply_user_id">
                </form>
              </div>
            </div>
          </div>
        {% endfor %}
          <a href="#reply{{i}}{{j}}-hide"  data-bs-toggle="collapse"> 已经隐藏 {{comment_reply[i]|length - 2}} 条回复评论</a>
          <div id="reply{{i}}{{j}}-hide" class="collapse" >
        {% for j in range(2, comment_reply[i]|length) %}
          <div class="media mt-3" style="margin-left: 10px;">
            <a class="mr-3" href="#">
              <img src="../static/scratch/static/avatar.png" height="50px" width="50px" style="border-radius: 8px;">
            </a>
            <div class="media-body" style="margin-left: 10px;">
              <div class="row">
                <h5 class="mt-0">{{ comment_reply[i][j][0] }}</h5>
              </div>
              <div class="row">
                <h6 style="color: blue;">@ {{ comment_reply[i][j][2] }}</h6>
              </div>
              <p style="margin-bottom: 0px;">{{ comment_reply[i][j][1] }}</p>
              <a href="#reply{{i}}{{j}}"  data-bs-toggle="collapse">回复</a>
              <div id="reply{{i}}{{j}}" class="collapse" >
                <form  action="/replycomment" method="post">
                  <textarea style="margin-top: 10px;margin-bottom: 10px;" placeholder="回复@{{ comment_reply[i][j][0] }}#{{comment_user_id[i][j+1]}}" class="form-control" id="text" name="text" placeholder="发表一条友善的评论😝"></textarea>
                  <button type="submit" class="btn btn-primary btn-sm" >发送</button>
                  <button type="button" class="btn btn-secondary btn-sm">取消</button>
                  <input style="display: none;" type="text"  name="reply_comment_id" value="{{comment_user_id[i][0]}}" id="reply_comment_id">
                  <input style="display: none;" type="text"  name="reply_user_id" value="{{comment_user_id[i][j+2]}}" id="reply_user_id">
                </form>
              </div>
      
            </div>
          </div>
        {% endfor %}
      </div>
        {% else %}
        {% for j in range(0, comment_reply[i]|length) %}
          <div class="media mt-3" style="margin-left: 10px;">
            <a class="mr-3" href="#">
              <img src="../static/scratch/static/avatar.png" height="50px" width="50px" style="border-radius: 8px;">
            </a>
            <div class="media-body" style="margin-left: 10px;">
              <div class="row">
                <h5 class="mt-0">{{ comment_reply[i][j][0] }}</h5>
              </div>
              <div class="row">
                <h6 style="color: blue;">@ {{ comment_reply[i][j][2] }}</h6>
              </div>
              <p style="margin-bottom: 0px;">{{ comment_reply[i][j][1] }}</p>
      
              <a href="#reply{{i}}{{j}}"  data-bs-toggle="collapse">回复</a>
              <div id="reply{{i}}{{j}}" class="collapse" >
                <form  action="/replycomment" method="post">
                  <textarea style="margin-top: 10px;margin-bottom: 10px;" placeholder="回复@{{ comment_reply[i][j][0] }}#{{comment_user_id[i][j+1]}}" class="form-control" id="text" name="text" placeholder="发表一条友善的评论😝"></textarea>
                  <button type="submit" class="btn btn-primary btn-sm" >发送</button>
                  <button type="button" class="btn btn-secondary btn-sm">取消</button>
                  <input style="display: none;" type="text"  name="reply_comment_id" value="{{comment_user_id[i][0]}}" id="reply_comment_id">
                  <input style="display: none;" type="text"  name="reply_user_id" value="{{comment_user_id[i][j+2]}}" id="reply_user_id">
                </form>
              </div>
      
            </div>
          </div>
          <hr>
        {% endfor %}
        {% endif %} 
      </div>
    </div>
  {% endfor %}
<br>
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li class="page-item">
        <a class="page-link" href="?page=1" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      {% for i in p.iter_pages() %}
        {% if index == i%}
        <li class="page-item active"><a class="page-link" href="?page={{i}}">{{i}}</a></li>
        {% else %}
        <li class="page-item"><a class="page-link" href="?page={{i}}">{{i}}</a></li>
        {% endif %}
      {% endfor %}
      <li class="page-item">
        <a class="page-link" href="?page=-1" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>

</div>
</div>
</body>
</html>